/**
* @file addUser.vue
* @author huang
* @date 2023/8/23
* @description 添加用户
* @projectName
* @email newflyhuang@gmail.com
*/

<template>

  <pure-dialog-template>
    <template #title>
      添加用户
    </template>
    <pure-table :list-api="listApi" :hide-index="true" selection :query-condition="queryCondition" @selection-change="handleSelectionChange">
      <template #header>
        <query-panel @query="handleQuery" @reset="resetQuery">
          <el-form-item label="用户名称" prop="userName">
            <el-input
              v-model="queryParams.userName"
              placeholder="请输入用户名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入手机号码"
              clearable
            />
          </el-form-item>
        </query-panel>
      </template>
      <el-table-column label="用户名称" prop="userName" />
      <el-table-column label="用户昵称" prop="nickName" />
      <el-table-column label="邮箱" prop="email" />
      <el-table-column label="手机" prop="phonenumber" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="{row}">
          <pure-type-text :config="ROLE_TYPE" :type="row.status" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180" />

    </pure-table>
    <template #footer>
      <pure-button label="确定" @click="handleSelectUser" />
      <pure-button label="取消" @click="$emit('done')" />

    </template>
  </pure-dialog-template>

</template>

<script>
import QueryPanel from '@/common/components/query/queryPanel.vue';
import SystemRoleApi from '../api';
import { ROLE_TYPE, } from '../config';

export default {
  components: { QueryPanel, },
  props: {
    roleId: {
      type: [
        String,
        Number,
      ],
      default: '',
    },
  },
  data() {
    return {
      ROLE_TYPE,
      listApi: SystemRoleApi.getNotAssignedUserRoleList,
      queryCondition: {},
      queryParams: {
        userName: '',
        phonenumber: '',
      },
      users: [],
    };
  },
  created() {
    this.queryCondition = {
      roleId: this.roleId,
    };
  },
  methods: {
    resetQuery() {
      this.queryParams = {
        userName: '',
        phonenumber: '',
      };
      this.queryCondition = {
        roleId: this.roleId,
        ...this.queryParams,
      };
    },
    handleQuery() {
      this.queryCondition = {
        ...this.queryParams,
      };
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.users = selection.map(item => {
        return {
          deptId: item.deptId,
          userId: item.userId,
        };
      });
    },
    /** 选择授权用户操作 */
    async  handleSelectUser() {
      if (!this.users.length) {
        this.$message.error('请选择要分配的用户');
        return;
      }
      await SystemRoleApi.multipleAuthorization({ roleId: this.roleId, grantUserList: this.users, });
      this.$emit('done');
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
